<template>
    <div class="system-department">
        <!-- 组件文档请查阅: http://bearsee.com.cn/sibionics-ui-next -->
        <sib-table
            ref="sibTableRef"
            default-expand-all
            :search-config="searchConfig"
            :table-column="tableColumn"
            :request-config="requestConfig"
            :show-pagination="false">
            <!-- 自定义插槽，插槽名称为对应列配置的 code -->
            <template #operate="{ row }">
                <!-- eslint-disable-next-line -->
                <el-button type="primary" link v-if="String(row.parentId) !== '0'" @click="handleEdit(row)">修改</el-button>
                <el-button type="primary" link @click="handleAdd(row)">新增</el-button>
                <el-button type="primary" link @click="handleCopy(row)">复制</el-button>
                <!-- eslint-disable-next-line -->
                <el-button type="danger" link v-if="String(row.parentId) !== '0'" @click="handleDelete(row)">删除</el-button>
            </template>
            <!-- 自定义表单与列表之间的内容 -->
            <template #operation-container>
                <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
            </template>
        </sib-table>

        <el-dialog
            class="form-dialog"
            v-if="dialogConfig.visible"
            append-to-body
            draggable
            align-center
            v-model="dialogConfig.visible"
            :close-on-click-modal="false"
            :title="dialogConfig.title"
            :width="dialogConfig.width || '800px'">
            <sib-form v-bind="dialogConfig" @reset="dialogConfig.visible = false" @submit="handleSubmit"></sib-form>
        </el-dialog>
    </div>
</template>

<script>
import { ref, reactive, inject } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

export default {
    name: 'SystemDepartment',
    setup() {
        const axios = inject('$axios');
        const sibTableRef = ref(null);
        // 查询模块表单配置
        const searchConfig = reactive({
            showExpand: false,
            rowFieldSize: 4,
            fields: [
                {
                    label: '部门名称',
                    code: 'deptName',
                    type: 'text',
                    maxlength: 100,
                },
                {
                    label: '状态',
                    code: 'status',
                    type: 'select',
                    optionProps: { value: 'dictValue', label: 'dictLabel' },
                    requestConfig: {
                        url: 'common-status.json',
                        method: 'get',
                    },
                    options: [],
                },
            ],
        });
        // 表格表头配置
        const tableColumn = ref([
            {
                label: '部门名称',
                code: 'deptName',
                minWidth: 260,
            },
            {
                label: '状态',
                code: 'status',
                type: 'tag',
                relateFieldCode: 'status',
                tagType: ({ status }) => (String(status) === '0' ? 'success' : 'danger'),
            },
            {
                label: '创建时间',
                code: 'createTime',
                type: 'timeStamp',
                format: 'YYYY-MM-DD hh:mm',
                minWidth: 160,
            },
            {
                label: '操作',
                code: 'operate',
                type: 'slot',
                minWidth: 260,
                fixed: 'right',
            },
        ]);
        // 列表查询接口配置
        const requestConfig = reactive({
            url: 'department-list.json',
            method: 'get',
        });

        const sibFormRef = ref(null);
        // 新增、编辑等弹窗配置
        const dialogConfig = reactive({
            ref: 'sibFormRef',
            title: '',
            width: '450px',
            rowFieldSize: 1,
            resetText: '取消',
            // add/edit/copy
            type: 'add',
            visible: false,
            fields: [
                {
                    label: '上级部门',
                    code: 'parentId',
                    type: 'tree',
                    filterable: true,
                    optionProps: {
                        label: 'label',
                        value: 'id',
                    },
                    requestConfig: {
                        url: 'user-tree.json',
                        method: 'get',
                    },
                    required: true,
                },
                {
                    label: '部门名称',
                    code: 'deptName',
                    type: 'text',
                    maxlength: 100,
                    required: true,
                },
                {
                    label: '显示排序',
                    code: 'orderNum',
                    type: 'number',
                    min: 0,
                    controlsPosition: 'right',
                    required: true,
                },
                {
                    label: '负责人',
                    code: 'leader',
                    type: 'text',
                    maxlength: 20,
                },
                {
                    label: '联系电话',
                    code: 'phone',
                    type: 'text',
                    valueType: 'number',
                    maxlength: 11,
                },
                {
                    label: '邮箱',
                    code: 'email',
                    type: 'text',
                    maxlength: 100,
                },
                {
                    label: '部门状态',
                    code: 'status',
                    type: 'radio',
                    optionProps: { value: 'dictValue', label: 'dictLabel' },
                    requestConfig: {
                        url: 'common-status.json',
                        method: 'get',
                    },
                    options: [],
                    required: true,
                    value: '0',
                },
            ],
            form: {},
        });

        return {
            sibTableRef,
            searchConfig,
            tableColumn,
            requestConfig,
            dialogConfig,
            sibFormRef,
            handleAdd(row) {
                Object.assign(dialogConfig, {
                    title: row.deptId ? `从【${row.deptName}】新增子菜单` : '新增菜单',
                    type: 'add',
                    visible: true,
                    form: { ...row },
                });
            },
            handleCopy(row) {
                Object.assign(dialogConfig, {
                    title: `从【${row.deptName}】复制`,
                    type: 'copy',
                    visible: true,
                    form: { ...row, deptId: null },
                });
            },
            handleEdit(row) {
                Object.assign(dialogConfig, {
                    title: `编辑【${row.deptName}】`,
                    type: 'edit',
                    visible: true,
                    form: { ...row },
                });
            },
            handleDelete(row) {
                ElMessageBox.confirm(`是否删除【${row.deptName}】`, '温馨提示').then(() => {
                    axios.delete(`/dept/${row.deptId}`).then(() => {
                        ElMessage({ type: 'success', message: '删除成功' });
                        sibTableRef.value.getTableData();
                    });
                }).catch(() => {});
            },
            handleSubmit(form, cb) {
                const method = dialogConfig.type === 'edit' ? 'put' : 'post';
                // prettier-ignore
                axios[method]('/dept', form).then(() => {
                    dialogConfig.visible = false;
                    dialogConfig.form = {};
                    sibTableRef.value.getTableData();
                }).finally(cb);
            },
        };
    },
};
</script>

<style lang="scss">
.system-department {
    .sib-table {
        height: 100%;
    }
}
</style>
